<template>
    <div class="supply">
        <span class="titleStr">供应商信息</span>
        <el-progress :percentage="8"  :show-text="false"></el-progress>
        <span class="describe">
            1.本表数据作为《供应商送货单》表中“选择送货信息”的数据源；
            <br>
            2.在《供应商档案》中可以通过双向关联进行查询；</span>
        <p></p>

        <el-form :model="supplierDeliverGoods" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="e2">
                <el-row :gutter="24">
                    <el-col :span="8" >

                        <el-form-item label="选择供应商" prop="supplierId" >
                            <div class="e1" @click="dialogVisible = true">
                                <span id="person" el-icon-coin>选择数据</span>
                            </div>
                        </el-form-item>

                        <el-dialog
                                title="选择数据"
                                :visible.sync="dialogVisible"
                                width="50%"
                                >
                            <el-table
                                    ref="singleTable"
                                    :data="filterSupplierlist"
                                    highlight-current-row
                                    border
                                    :row-key="getRowKey"
                                    @select="handleSelect"
                                    style="width: 100%">

                                <el-table-column
                                        type="selection"
                                        width="50">
                                </el-table-column>

                                        <el-table-column
                                                property="supplierCode"
                                                label="供应商编码"
                                                width="120"
                                                >
                                        </el-table-column>

                                        <el-table-column
                                                property="supplierName"
                                                label="供应商名称"
                                                width="120">
                                        </el-table-column>

                                        <el-table-column
                                                property="supplierType"
                                                label="供应商分类">
                                        </el-table-column>

                                        <el-table-column
                                                property="supplierState"
                                                label="供应商等级">
                                        </el-table-column>

                                        <el-table-column
                                                property="supplierAddress"
                                                label="供应商地址">
                                        </el-table-column>

                                    </el-table>

                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="handleConfirm">确 定</el-button>
                        </span>
                    </el-dialog>

                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="供应商编码"  style="width: 450px">
                            <el-input v-model="supplierCode" placeholder="请选择供应商,自动获取" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="供应商名称"  style="width: 450px">
                            <el-input v-model="supplierName" placeholder="请选择供应商,自动获取" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>


                <br>
                <br>

                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="发货人姓名" prop="shipperName" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.shipperName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="发货人联系方式" prop="shipperPhone" label-width="120px" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.shipperPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="发货地址"  style="width: 450px">
                            <el-input
                                    v-model="supplierAddress"
                                    placeholder="请选择供应商,自动获取"
                                    style="width: 350px"

                                    >
                            </el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
            </div>

            <span class="titleStr">供应商送货信息</span>
            <el-progress :percentage="8"  :show-text="false"></el-progress>
            <p></p>
            <div class="e3">
                <el-row :gutter="24">
                    <el-col :span="8" >
                        <el-form-item label="司机姓名" prop="driverName" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.driverName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="司机联系方式" prop="driverPhone" label-width="120px" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.driverPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" >
                        <el-form-item label="车牌号" prop="carNum" style="width: 450px">
                            <el-input v-model="supplierDeliverGoods.carNum"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>

        </el-form>

    </div>
</template>

<script>
    export default {
        name: "SupplierDeliverPersonAddView",
        data() {
            return{
                    supplierlist:[],//后端传输过来的供应商信息
                    supplierDeliverGoods: {
                        supplierId:'',//供应商id
                        shipperName:'',//发货人
                        shipperPhone:'',//发货人联系方式
                        driverName:'',//司机姓名
                        driverPhone:'',//司机联系方式
                        carNum:''//车牌号
                    },
                    supplierCode:'',
                    supplierName:'',
                    supplierAddress:'',
                    //表格相关
                    dialogVisible:false,
                    filterSupplierlist:[],//过滤完的
                    selectedRows: {},//存储选中的行
                    rules: {
                        supplierId: [
                            { required: true, message: '请选择供应商', trigger: ['change', 'blur', 'input'] },
                        ],
                        shipperName: [
                            { required: true, message: '请输入发货人姓名', trigger: 'blur' },
                            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                        ],
                        shipperPhone: [
                            {required: true, message: '联系方式不能为空', trigger: 'blur'},
                            {type: 'string', message: '联系电话必须是字符串类型', trigger: ['blur', 'change']}, // 通常不需要，因为v-model绑定的是字符串
                            {pattern: /^[1][3-9]\d{9}$/, message: '请输入有效的中国大陆手机号码', trigger: 'blur'} // 正则表达式验证手机号码
                        ],
                        driverName: [
                            { required: true, message: '请输入司机姓名', trigger: 'blur' },
                            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
                        ],
                        driverPhone: [
                            {required: true, message: '联系方式不能为空', trigger: 'blur'},
                            {type: 'string', message: '联系电话必须是字符串类型', trigger: ['blur', 'change']}, // 通常不需要，因为v-model绑定的是字符串
                            {pattern: /^[1][3-9]\d{9}$/, message: '请输入有效的中国大陆手机号码', trigger: 'blur'} // 正则表达式验证手机号码
                        ],
                        carNum: [
                            {required: true,
                                validator: (rule, value, callback) => {
                                    const carNumberRegex = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
                                    if (carNumberRegex.test(value)) {
                                        callback();
                                    } else {
                                        callback(new Error('请输入有效的车牌号,格式不正确'));
                                    }
                                },
                                trigger: 'blur'
                            }
                        ]
                    }//规则到此
                  }
        },
        //钩子函数,页面加载结束调用
        created() {
            this.getSupplier();//查询供应商信息
        },
        //方法
        methods:{
            //查询供应商信息
            getSupplier() {
                this.$axios.get("manage/supplier/qualifiedSupplierList").then(
                    response => {
                            this.supplierlist = response.data.suppliers;
                            // 进行数据过滤
                            this.filterSupplierlist = this.supplierlist.map(item => {
                                return {
                                    supplierId:item.id,
                                    supplierCode:item.supplierCode,
                                    supplierName:item.supplierName,
                                    supplierType:item.supplierType,
                                    supplierState:item.supplierState,
                                    supplierAddress:item.supplierAddress
                                };
                            });
                    })
            },
            //表格相关
            getRowKey(row) {
                return row.supplierId; // 定义行的唯一标识，根据实际数据结构修改
            },
            // 表格选择改变事件，确保单选
            handleSelect(selection, row) {
                if (selection.length > 1) {
                    // 先取消之前的选择
                    if (this.selectedRows && this.selectedRows!== row) {
                        this.$refs.singleTable.toggleRowSelection(this.selectedRows, false);
                    }
                    this.selectedRows = row;
                    this.$refs.singleTable.toggleRowSelection(row, true);
                } else if (selection.length === 1) {
                    this.selectedRows = row;
                } else {
                    this.selectedRows = null;
                }
            },
            // 点击确定按钮的处理函数
            handleConfirm() {
                    // 将选中的数据赋值给相应的地方
                    this.supplierCode = this.selectedRows.supplierCode;
                    this.supplierName = this.selectedRows.supplierName;
                    this.supplierAddress = this.selectedRows.supplierAddress;
                    this.supplierDeliverGoods.supplierId=this.selectedRows.supplierId;

                    this.dialogVisible = false;//关闭对话框

            },
            //提交
            submitForm(formName) {
                this.$refs.ruleForm.validate((valid)=>{
                    if(valid){
                        this.$axios.post("manage/deliverPerson/add", this.supplierDeliverGoods, {
                            headers: {
                                'Content-Type': 'application/json'
                            }
                        }).then(response=>{

                        });
                    }
                });
            },//提交到此
            //重置
            resetForm(formName) {
                this.$refs[formName].resetFields();
                // 手动清空其他数据
                this.selectedRows = {};
                this.supplierCode = '';
                this.supplierName = '';
                this.supplierAddress = '';
                this.supplierDeliverGoods.supplierId = '';
                this.supplierDeliverGoods.shipperName = '';
                this.supplierDeliverGoods.shipperPhone = '';
                this.supplierDeliverGoods.driverName = '';
                this.supplierDeliverGoods.driverPhone = '';
                this.supplierDeliverGoods.carNum = '';
            }//重置到此
        }
    }

</script>

<style scoped>
    .e1 {
        padding: 0;
        border: 1px dashed #666;
        width: 350px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        font-weight:lighter;
    }
    .e2{
        height: 250px;
        z-index: 100;
    }
    .e3{
        height: 250px;
    }
    .titleStr {
        line-height: 30px;
        color: #409EFF;
    }
    .describe {
        font-size: 14px;
        color: #666;
    }
</style>